<template>
  <div id="Article" :class="{ 'layout-hide-text': spanLeft < 5 }">
    <Row type="flex">
      <i-col :span="spanLeft" class="left">
        <Menu
          active-name="1"
          align="center"
          class="post-type"
          @on-select="switchTab"
        >
          <Menu-group title="Bingo专栏">
            <Menu-item
              v-for="(item, index) in ArticleType"
              :name="item.type"
              :key="index"
            >
              {{ item.value }}
            </Menu-item>
          </Menu-group>
        </Menu>
      </i-col>
      <br />
      <i-col :span="spanRight" class="right">
        <div class="content">
          <ArticleShow :mypost-flag="false" :postList="postList"></ArticleShow>
        </div>
      </i-col>
      <i-col :span="6"><TopArticle :topList="topList"></TopArticle></i-col>
    </Row>
  </div>
</template>
<script>
import ArticleShow from "../Article/ArticleShow";
import TopArticle from "../Article/TopArticle";
import { getPostList, getTopPostList, getAllPosts } from "@/utils/api/";
export default {
  data() {
    return {
      spanLeft: 5,
      spanRight: 13,
      ArticleType: [
        { type: "推荐", value: "推荐" },
        { type: "学习", value: "学习" },
        { type: "游戏", value: "游戏" },
        { type: "美食", value: "美食" },
        { type: "历史", value: "历史" },
      ],
      postList: [],
      topList: [
        { title: "今日热帖之第一帖", author: "贴文作者" },
        { title: "今日热帖之第一帖", author: "贴文作者" },
        { title: "今日热帖之第二贴", author: "贴文作者" },
        { title: "今日热帖之第三贴", author: "贴文作者" },
        { title: "今日热帖之第四贴", author: "贴文作者" },
        { title: "今日热帖之第五帖", author: "贴文作者" },
        { title: "今日热帖之第六帖", author: "贴文作者" },
      ],
    };
  },
  name: "Article",
  components: { ArticleShow, TopArticle },
  created() {
    // 获取所有帖子文章
    this.initAllPosts();
    //发送请求获取热帖
    /**
       getTopPostList().then((res)=>{
       this.topList=res.data.resultMap
      })
       **/
  },

  methods: {
    switchTab(type) {
      //发送请求获取对应type贴文，item为type
      getPostList(type).then((res) => {
        this.postList = res.data.resultMap.postList.list;
      });
    },
    async initAllPosts() {
      let result = await getAllPosts();
      // console.log(result);
      let postList = result.data.resultMap.postList.list;
      this.postList = postList;
    },
  },
};
</script>

<style scoped>
.post-type {
  font-size: 20px;
}
</style>
